---
title: エディタのセットアップ
description: Astroで開発するため、エディタの設定をしましょう。
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

エディタをカスタマイズし、新機能を追加して開発者体験を向上させましょう。

## VS Code

[VS Code](https://code.visualstudio.com/)はMicrosoft社が開発した、web開発者に人気のあるコードエディタです。VS Codeのエンジンは[GitHub Codespaces](https://github.com/features/codespaces)や[Gitpod](https://gitpod.io/)といった人気のあるブラウザ内コードエディタもサポートしています。

Astroはどのようなコードエディタでも動作しますが、VS CodeはAstroで開発する際におすすめのエディタです。 私たちはいくつかの重要な機能の追加と、開発者体験を向上させる公式の[Astro VS Code拡張機能](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)をメンテナンスしています。

- `.astro`ファイルのシンタックスハイライト
- `.astro`ファイルのTypeScript型情報
- [VS Code Intellisense](https://code.visualstudio.com/docs/editor/intellisense)によるコード補完、ヒントなど

早速、[Astro VS Code拡張機能](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)をインストールしてみましょう。


import ReadMore from '~/components/ReadMore.astro';

<ReadMore>Astroプロジェクトでどのように[TypeScriptをセットアップ](/ja/guides/typescript/)するのか見る。</ReadMore>


## Zed 

[Zed](https://zed.dev/)はオープンソースのコードエディタで、バージョン0.123.2でAstroのサポートが追加されました。IDEの「拡張機能」タブから[Astro extension](https://github.com/zed-extensions/astro)をインストールできます。この拡張機能には、構文のハイライト、コード補完、フォーマットなどの機能が含まれています。

## JetBrainsのIDE

[WebStorm](https://www.jetbrains.com/webstorm/)はJavaScriptとTypeScriptに対応したIDEで、バージョン2024.2でAstro Language Serverのサポートが追加されました。このアップデートでは、構文のハイライト、コード補完、フォーマットなどの機能が追加されています。

公式プラグインは[JetBrains Marketplace](https://plugins.jetbrains.com/plugin/20959-astro)から、またはIDEの"Plugins"タブで"Astro"を検索してインストールしてください。言語サーバーの切り替えは `Settings | Languages & Frameworks | TypeScript | Astro` で行えます。

WebStormでのAstroサポートの詳細については、公式の[WebStorm Astro Documentation](https://www.jetbrains.com/help/webstorm/astro.html)を参照してください。

## その他のコードエディタ

素晴らしいコミュニティが他の人気エディタ用の拡張機能をメンテナンスしています。

- [VS Code Extension on Open VSX](https://open-vsx.org/extension/astro-build/astro-vscode) <span style="margin: 0.25em;"><Badge text="Official" /></span> - [VSCodium](https://vscodium.com/)のようなオープンプラットフォーム向けのOpen VSX Registryで利用可能な公式のAstro VS Code拡張機能です。
- [Nova Extension](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/)<span style="margin: 0.25em;"><Badge class="neutral-badge" text="Community" /></span> - Nova向けにAstro用シンタックスハイライトや自動補完を提供します。
- [Vim Plugin](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Community" /></span> - VimとNeovim向けにAstro用シンタックスハイライトやインデント、コードの折りたたみを提供します。
- Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro)と[TreeSitter](https://github.com/virchau13/tree-sitter-astro) Plugins <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Community" /></span> - Neovim向けにAstro用シンタックスハイライトやtreesitterパース、自動補完を提供します。
- Emacs - Astroと連携するための[EmacsとEglotの設定](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0)<span style="margin: 0.25em;"><Badge class="neutral-badge" text="Community" /></span>の説明を参照してください。
- [Astro syntax highlighting for Sublime Text](https://packagecontrol.io/packages/Astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Community" /></span> - Sublime Text用のAstroパッケージで、Sublime Textパッケージマネージャーから利用できます。

## ブラウザ内エディタ

ローカルエディタに加え、Astroはブラウザで動作するオンラインエディタでもきちんと動作します。

- [StackBlitz](https://stackblitz.com/)と[CodeSandbox](https://codesandbox.io/) - ブラウザ上で動作するオンラインエディタで、`.astro`ファイル用のシンタックスハイライトをサポートしています。設定やインストールは不要です。
- [GitHub.dev](https://github.dev/) - [Web Extensions](https://code.visualstudio.com/api/extension-guides/web-extensions)としてAstro VS Code拡張機能をインストールでき、一部の機能のみ利用できるようになります。現在のところ、シンタックスハイライトのみをサポートしています。
- [IDX](https://idx.dev)と[Gitpod](https://gitpod.io/) – Open VSXから公式Astro VS Code拡張機能をインストールできるクラウドIDEです。

## その他のツール

### ESLint

[ESLint](https://eslint.org/)はJavaScriptとJSX向けの人気のリンターです。Astro向けのサポートとしては、[コミュニティがメンテナンスしているプラグイン](https://github.com/ota-meshi/eslint-plugin-astro)をインストールできます。

あなたのプロジェクトにESLintをインストールし設定するための詳細については、[同プロジェクトのユーザーガイド](https://ota-meshi.github.io/eslint-plugin-astro/user-guide/)を参照してください。

### Stylelint

[Stylelint](https://stylelint.io/)はCSSのための人気のリンターです。[コミュニティが管理するStylelintの設定](https://github.com/ota-meshi/stylelint-config-html)は、Astro向けのサポートを提供します。

インストール手順、エディタでの使い方、および追加情報は、プロジェクトのREADMEに記載されています。

### Prettier

[Prettier](https://prettier.io/)はJavaScript、HTML、CSSなどのための人気のフォーマッターです。[Astro VS Code拡張機能](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)や[他のエディタ内でAstro言語サーバー](#その他のコードエディタ)を使用している場合、Prettierによるコードのフォーマット機能は含まれています。

（CLIなど）エディタの外や、Astroのエディタツールをサポートしていないエディタ内で`.astro`ファイルをフォーマットするためには、[公式のAstro Prettierプラグイン](https://github.com/withastro/prettier-plugin-astro)をインストールしてください。

<Steps>
1. まず、Prettierとプラグインをインストールしましょう。

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install --save-dev --save-exact prettier prettier-plugin-astro
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add --save-dev --save-exact prettier prettier-plugin-astro
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add --dev --exact prettier prettier-plugin-astro
      ```
      </Fragment>
    </PackageManagerTabs>

2. プロジェクトルートに`.prettierrc`設定ファイル (または`.prettierrc.json`, `.prettierrc.mjs`, [その他サポートされている形式のファイル](https://prettier.io/docs/configuration))を設置し、`prettier-plugin-astro`を追加してください。

    このファイルでは、Astroファイル用のパーサーも手動で指定してください。

    ```json title=".prettierrc"
    {
      "plugins": ["prettier-plugin-astro"],
      "overrides": [
        {
          "files": "*.astro",
          "options": {
            "parser": "astro",
          }
        }
      ]
    }
    ```

3. フォーマットを実行するには、以下のコマンドをターミナルで実行してください。

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npx prettier . --write
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm exec prettier . --write
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn exec prettier . --write
      ```
      </Fragment>
    </PackageManagerTabs>
</Steps>

Prettierプラグインの対応オプション、VS Code内でのPrettierの設定方法などについては、[PrettierプラグインのREADME](https://github.com/withastro/prettier-plugin-astro/blob/main/README.md)を参照してください。
